<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <textarea placeholder="请输入消息"></textarea>
    <button>发送</button>
    <h1>消息列表</h1>
    <div class="box">
      <p>默认</p>
    </div>
    <script>
      // 1. 获取元素
      const textarea = document.querySelector("textarea"); // 获取文本区域元素
      const btn = document.querySelector("button"); // 获取按钮元素
      const box = document.querySelector(".box"); // 获取类名为 box 的元素
      const h1 = document.querySelector("h1"); // 获取 h1 元素

      // 为按钮添加点击事件监听器
      btn.addEventListener("click", () => {
        // 2. 获取文本框的内容
        const text = textarea.value.trim(); // 获取文本区域的值并去除首尾空格

        // 3. 创建p标签
        const p = document.createElement("p"); // 创建一个新的 p 元素

        // 4. 将文本内容添加到p标签中
        p.innerText = text; // 将获取到的文本内容设置给 p 元素

        // 5. 将p标签添加到box中
        box.appendChild(p); // 将 p 元素添加到 box 元素内

        // 为p标签添加点击事件监听器
        p.addEventListener("click", () => {
          p.remove(); // 点击 p 标签时，移除该元素
        });
      });
    </script>
  </body>
</html>
